<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<!-- 1 数组对象去重 -->
		<!-- var Name = [
				{ first: '李', last: '四' },
				{ first: '王', last: '五' },
				{ first: '赵', last: '六' },
			]
			// 1、借助对象访问属性的方法，判断属性是否存在，已存在进行过滤
			var result = []
			var obj = {}
			for (var i = 0; i < Name.length; i++) {
				if (!obj[Name[i].first]) {
					result.push(Name[i])
					obj[Name[i].first] = true
				}
			}
			console.log(result)

			// 2、借助数组中reduce方法，访问遍历数组
			var obj = {}
			Name = Name.reduce(function (item, next) {
				obj[next.first]
					? ''
					: (obj[next.first] = true && item.push(next))
				return item
			}, [])
			console.log(Name)

			// 3、map方法
			let map = new Map()
			for (let item of Name) {
				if (!map.has(item.last)) {
					map.set(item.last, item)
				}
			}
			arr = [...map.values()]
			console.log(arr) -->

		<!-- <script>
			//  2、查找数组中的整数

			//  1、通过“Math.trunc()”方法去除数字的小数部分，保留整数部分
      console.log(Math.trunc(2.01)); // 2
			//  2、通过“Math.round()”方法返回一个数字四舍五入后的整数部分
      console.log(Math.round(2.01)); // 2
			//  3、通过“Math.ceil()”方法实现向上取整等
      console.log(Math.ceil(2.01)); // 3
      //  4、通过Math.floor()方法返回一个小于或等于数字的最小整数，即向下取整。
      console.log(Math.floor(2.9)); // 2
		</script> -->

		<!-- // 操作dom点击事件向服务器上传数据，在上传未完成之前不可重复操作事件
			// 方法一： vue
			// 通过控制 loading 来设置 loading，或者 disabled 也行，
			// 从而来控制按钮的是否可以点击。通过在 handleSubmit 函数未获取到服务器接口响应之前，
			// 该按钮一直处于不可用的状态，直到接收到服务器接口相应后，我们再将按钮恢复为可用状态。
			// <el-button type="primary" class="w312" :loading="loading" @click="handleSubmit">登录</el-button>
			// handleSubmit () {
			//   this.loading = true
			//   setTimeout(() => {
			//     this.loading = false
			//   }, 1000)
			// }

			// // 或者
			// handleSubmit () {
			//   if (timer) {
			//     clearTimeout(timer)
			//   }
			//   timer = setTimeout(() => {
			//     this.submit()
			//   }, 300)
			// }

     //  方法二：
    // 使用 axios 第三方库，request 拦截器来拦截重复请求。 -->

		<!-- 日期格式化，日期不足前两位补0（2021-02-6-06 06:06:00） -->
		<!-- // 1、基础方法
			var date = new Date()
			var year = date.getFullYear()
			var mon = date.getMonth() + 1
			var day = date.getDate()
			var h = date.getHours()
			var m = date.getMinutes()
			var s = date.getSeconds()
			var submitTime = ''
			submitTime += year + '-'
			if (mon >= 10) {
				submitTime += mon + '-'
			} else {
				submitTime += '0' + mon + '-'
			}
			if (day >= 10) {
				submitTime += day
			} else {
				submitTime += '0' + day
			}
			submitTime += ' '
			if (h >= 10) {
				submitTime += h + ':'
			} else {
				submitTime += '0' + h + ':'
			}
			if (m >= 10) {
				submitTime += m
			} else {
				submitTime += '0' + m
			}
			console.log(submitTime)

			// 利用ES6中padStart()方法的两个属性，填充后总长度length和填充字符串str1;
			var nowTime = new Date()
			var nowMonth = String(nowTime.getMonth() + 1).padStart(2, '0')
			var nowday = String(nowTime.getDate()).padStart(2, '0')
			console.log(nowMonth + '月' + nowday + '日')  -->

		<!-- 获取url参数 -->
		<!-- // 1、正则法
			function getQueryString(name) {
			    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
			    var r = window.location.search.substr(1).match(reg);
			    if (r != null) {
			        return unescape(r[2]);
			    }
			    return null;
			}
			// 这样调用：
			alert(GetQueryString("参数名1"));
			alert(GetQueryString("参数名2"));
			alert(GetQueryString("参数名3"));
		
			// 2、split拆分法
			function GetRequest() {
			    var url = location.search; //获取url中"?"符后的字串
			    var theRequest = new Object();
			    if (url.indexOf("?") != -1) {
			        var str = url.substr(1);
			        strs = str.split("&");
			        for(var i = 0; i < strs.length; i ++) {
			            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
			        }
			    }
			    return theRequest;
			}
			var Request = new Object();
			Request = GetRequest();
			// var 参数1,参数2,参数3,参数N;
			// 参数1 = Request['参数1'];
			// 参数2 = Request['参数2'];
			// 参数3 = Request['参数3'];
			// 参数N = Request['参数N'];
	
			// 3、正则（推荐使用）
		// 比如说一个url：http://wwww.fly63.com/?q=js,我们想得到参数q的值，那可以通过以下函数调用即可。
			function GetQueryString(name) {
			    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			    var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
			    var context = "";
			    if (r != null)
			        context = decodeURIComponent(r[2]);
			    reg = null;
			    r = null;
			    return context == null || context == "" || context == "undefined" ? "" : context;
			}
			alert(GetQueryString("q"));

			// 4、单个参数的获取方法
			function GetRequest() {
			   var url = location.search; //获取url中"?"符后的字串
			   if (url.indexOf("?") != -1) {    //判断是否有参数
			      var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
			      strs = str.split("=");   //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
			      alert(strs[1]);          //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
			   }
			} -->

		<!-- 给定一个纯数字数组，先去重，在排序，升序 -->
		<!-- var A = [1, 5, 6, 3, 2, 7, 6, 1, 5, 4, 8, 6, 9]
			var newArr = [] //创建一个新数组
			var isRepeat = false //判断
			for (var i in A) {
				isRepeat = false
				for (var h in newArr) {
					if (newArr[h] == A[i]) {
						isRepeat = true //如果数组的数值相等返回true
					}
				}
				if (!isRepeat) {
					newArr[newArr.length] = A[i]
					//不相等的数值放入新的数组
				}
			}
			console.log('去重后的', newArr)
			//冒泡排序
			var temp
			for (var i = newArr.length; i > 0; i--) {
				for (var j = 0; j < i - 1; j++) {
					if (newArr[j] > newArr[j + 1]) {
						temp = newArr[j]
						newArr[j] = newArr[j + 1]
						newArr[j + 1] = temp
					}
				}
			}
			console.log('去重排序后的', newArr) -->

		<!-- 用css写一个布局，左侧固定宽度，右侧自适应 -->
		<!-- <div class="box">
			<div class="a">固定宽度的一侧</div>
			<div class="b">自适应的一侧</div>
		</div> -->
		<!-- 方法一：对固定宽度的元素设置float，自适应的一侧（块级元素）通过margin避免两元素的重叠，本质还是利用块级元素具有默认继承父元素宽度的特性。 -->
		<!-- <style>
			.a {
				float: left;
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
			.b {
				height: 200px;
				margin-left: 200px;
				background-color: blue;
			}
		</style> -->

		<!-- 方法二：对自适应元素设置absolute定位，通过left： 0， right： 0对自适应元素进行宽度拉伸，再通过设置margin-left避免元素重叠 -->
		<!-- <style>
			.box {
				position: relative;
			}
			.a {
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
			.b {
				height: 200px;
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				margin-left: 200px;
				background-color: blue;
			}
		</style> -->

		<!-- 方法三：flex布局 -->
		<!-- <style>
			.box {
				display: flex;
			}
			.a {
				/* flex-shrink: 0; */
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
			.b {
				height: 200px;
				flex: 1;
				background-color: blue;
			}
		</style> -->

		<!-- 给定一个json格式数据，然后从中取出来相同属性，将属性值合并累加，输出为对象 -->
		<script>
			let resData = [
				{
					name: '住院医疗最高报销',
					tagName: '医疗',
					insuredAmount: '6000',
				},
				{
					name: '身故赔付',
					tagName: '寿险',
					insuredAmount: '36.00',
				},
				{
					name: '烦死了免费陈述事实',
					tagName: '寿险',
					insuredAmount: '8888.00',
				},
				{
					name: '你好，噜噜噜',
					tagName: '寿险',
					insuredAmount: '66.00',
				},
				{
					name: '120种重大疾病确诊赔付',
					tagName: '重疾',
					insuredAmount: '350000',
				},
			]

			// 将具有相同“tagName”的对象合并成新数组
			// let Data = [
			// 	{
			// 		tagName: '医疗',
			// 		dataInfo: [
			// 			{
			// 				name: '住院医疗最高报销',
			// 				tagName: '医疗',
			// 				insuredAmount: '6000',
			// 			},
			// 		],
			// 	},
			// 	{
			// 		tagName: '寿险',
			// 		dataInfo: [
			// 			{
			// 				name: '身故赔付',
			// 				tagName: '寿险',
			// 				insuredAmount: '36.00',
			// 			},
			// 			{
			// 				name: '烦死了免费陈述事实',
			// 				tagName: '寿险',
			// 				insuredAmount: '8888.00',
			// 			},
			// 			{
			// 				name: '你好，噜噜噜',
			// 				tagName: '寿险',
			// 				insuredAmount: '66.00',
			// 			},
			// 		],
			// 	},
			// 	{
			// 		tagName: '重疾',
			// 		dataInfo: [
			// 			{
			// 				name: '120种重大疾病确诊赔付',
			// 				tagName: '重疾',
			// 				insuredAmount: '350000',
			// 			},
			// 		],
			// 	},
			// ]

			// 方案一：
			let tempArr = []
			let Data = []
			for (let i = 0; i < resData.length; i++) {
				if (tempArr.indexOf(resData[i].tagName) === -1) {
					Data.push({
						tagName: resData[i].tagName,
						dataInfo: [resData[i]],
					})
					tempArr.push(resData[i].tagName)
				} else {
					for (let j = 0; j < Data.length; j++) {
						if (Data[j].tagName == resData[i].tagName) {
							Data[j].dataInfo.push(resData[i])
							break
						}
					}
				}
			}
			console.log(Data)

			// 方案二：
			let dataInfo = {}
			resData.forEach((item, index) => {
				let { tagName } = item
				if (!dataInfo[tagName]) {
					dataInfo[tagName] = {
						tagName,
						child: [],
					}
				}
				dataInfo[tagName].child.push(item)
			})
			let list = Object.values(dataInfo) // list 转换成功的数据
			console.log(list)
		</script>
	</body>
</html>
